<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.web{
				width: 300px;
				height: 300px;
				border: 1px solid #000000;
			}
			ul{
				text-align: center;
			}
			ul li{
				display: inline-block;
				margin: 0 10px;
				cursor: pointer;
			}
			.nav{
				position: relative;
			}
			.test{
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			.test:nth-child(1){
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="web">
			<ul>
				<li>点击</li>
				<li>事件</li>
				<li>过后</li>
			</ul>
			<div class="nav">
				<div class="test">点击</div>
				<div class="test">事件</div>
				<div class="test">过后</div>
			</div>
		</div>
		<script type="text/javascript">
			function xuan(el){
				this.El=document.querySelector(el);
				this.ali = this.El.querySelectorAll("li");
				this.test = this.El.querySelectorAll(".test");
				this.leng = this.ali.length;
				xuan.prototype.init = function(){
					var that = this;
					for (var i=0;i<this.leng;i++) {
						this.ali[i].index=i
						this.ali[i].addEventListener("click",function(){
							for (var j=0;j<that.leng;j++) {
								that.test[j].style.display="none";
								console.log(that);
							}
							that.test[this.index].style.display="block";
						})
					}
				}
			}
			var ka = new xuan(".web");
			console.log(ka);
				ka.init();
		</script>
	</body>
</html>
